<div class="example-tree-controls">
  <mat-checkbox [formControl]="wrap">Wrap</mat-checkbox>
  <mat-checkbox [formControl]="multi">Multi</mat-checkbox>
  <mat-checkbox [formControl]="disabled">Disabled</mat-checkbox>
  <mat-checkbox [formControl]="skipDisabled">Skip Disabled</mat-checkbox>

  <mat-form-field subscriptSizing="dynamic" appearance="outline">
    <mat-label>Orientation</mat-label>
    <mat-select [(value)]="orientation">
      <mat-option value="vertical">Vertical</mat-option>
      <mat-option value="horizontal">Horizontal</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field subscriptSizing="dynamic" appearance="outline">
    <mat-label>Selection Strategy</mat-label>
    <mat-select [(value)]="selectionMode">
      <mat-option value="explicit">Explicit</mat-option>
      <mat-option value="follow">Follow</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field subscriptSizing="dynamic" appearance="outline">
    <mat-label>Focus Strategy</mat-label>
    <mat-select [(value)]="focusMode">
      <mat-option value="roving">Roving</mat-option>
      <mat-option value="activedescendant">Active Descendant</mat-option>
    </mat-select>
  </mat-form-field>
</div>

<div class="example-tree-output">
  <strong>Selected Values:</strong> {{ selectedValues().join(', ') || 'None' }}
</div>

<ul
  cdkTree
  class="example-tree"
  [orientation]="orientation"
  [multi]="multi.value"
  [disabled]="disabled.value"
  [selectionMode]="selectionMode"
  [focusMode]="focusMode"
  [wrap]="wrap.value"
  [skipDisabled]="skipDisabled.value"
  [(value)]="selectedValues"
  #tree="cdkTree"
>
  @for (node of treeData; track node) {
    <example-node [node]="node" />
  }
</ul>
